<template>
	<view class="page-container">
		<view class="" style="margin-bottom: 180rpx;">
			<cz-navBar title="首页" titleColor="#000000" :showBack="false" iconColor="#fff" :iconSize="24" placeholderBg
				:navFrameStyle="{'font-weight': 'bold'}"></cz-navBar>
		</view>
		<!-- 轮播 -->

		<view class="Carousel-box">
			<view class="Home-swiper">
				<uv-swiper :list="list" height="210" radius="16" indicator indicatorMode="dot"></uv-swiper>
			</view>

			<view class="menu-box">
				<view class="menu-item" v-for="(item, index) in imgList" :key="index">
					<view class="menu-img" :style="{ backgroundColor: item.bgcolor }">
						<image :src="item.src" :style="{ width: item.width + 'rpx', height: item.height + 'rpx' }"
							mode="aspectFit"></image>
						<!-- <uv-badge v-if="index === 1" type="error" max="99" :value="1"></uv-badge> -->
					</view>
					<view class="menu-title">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<!-- 达人登记 -->
		<view class="registration">
			<view class="registration-item">
				<image src="/static/达人登记bg.png" class="background-image"></image>
				<view class="registration-box">
					<view class="registration-logo">
						<image src="../../static/达人登记logo.png" mode="" class="item-logo"></image>
					</view>
					<view class="registration-title" @click="handleTo">
						<view class="">达人登记</view>
						<view class="rightArrow">
							<image src="../../static/右箭头.png" mode="" class="rightArrow-img"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的看板 -->
		<view class="dashboard">
			<view class="dashboard-box">
				<view class="dashboard-title">我的看板</view>
			</view>
			<!--报表容器 -->
			<view style="width:750rpx; height:750rpx"><l-echart ref="chartRef" @finished="init"></l-echart></view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

	export default {
		data() {
			return {
				list: [
					'http://gips0.baidu.com/it/u=1490237218,4115737545&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720',
					'http://gips0.baidu.com/it/u=1490237218,4115737545&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720',
					'http://gips0.baidu.com/it/u=1490237218,4115737545&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720',
				],
				imgList: [{
						src: '../../static/我的达人.png',
						bgcolor: '#1f69e0',
						title: "我的达人",
						width: 50,
						height: 50,
					},
					{
						src: '../../static/消息通知.png',
						bgcolor: '#9fe181',
						title: "消息通知",
						width: 50,
						height: 50,
					},
				],
				option: {

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},

					legend: {
						data: ['Rainfall', 'Evaporation'],
						orient: 'horizontal', // 水平排列
						left: 'center', // 水平居中对齐
						top: 'top', // 置于顶部
						selected: {
							'Rainfall': true, // Rainfall 默认为显示状态
							'Evaporation': false // Evaporation 默认为隐藏状态
						}
					},
					toolbox: {
						show: true,
						feature: {
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: true,
					xAxis: [{
						type: 'category',
						data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
						axisLabel: {
							color: '#086ab9'
						}
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							color: '#086ab9'
						}
					}],
					series: [{
							name: 'Rainfall',
							type: 'bar',
							data: [
								2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
							],
							itemStyle: {
								color: '#2a65f8'
							},
							markPoint: {
								data: [{
										type: 'max',
										name: 'Max'
									},
									{
										type: 'min',
										name: 'Min'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						},
						{
							name: 'Evaporation',
							type: 'bar',
							data: [
								2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
							],
							itemStyle: {
								color: '#7bd35b'
							},
							markPoint: {
								data: [{
										name: 'Max',
										value: 182.2,
										xAxis: 7,
										yAxis: 183
									},
									{
										name: 'Min',
										value: 2.3,
										xAxis: 11,
										yAxis: 3
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						}
					] 
				},
			}
		}, 
		methods: {
			async init() {

				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.option)
			},
			handleTo() {
				uni.navigateTo({
					url: "/pages/InformationRegistration/InformationRegistration"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page-container {
		background-color: #f6f6f6;
	}


	.Carousel-box {
		background-color: #fff;

		.Home-swiper {
			width: 95%;
			margin: 0 auto;
			padding-top: 20rpx;
		}

		.menu-box {
			width: 95%;
			margin: 0 auto;

			margin-top: 10rpx;
			display: flex;
			gap: 128rpx;
			align-items: center;
			height: 240rpx;

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20rpx;


				.menu-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 30%;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;


					.uv-badge {
						position: absolute;
						top: -5px;

						right: -5px;

					}

				}

				.menu-img image {
					width: 50%;
					height: 50%;
				}

				.menu-title {
					font-size: 30rpx;
					color: #000;
				}
			}
		}


	}

	.registration {
		width: 95%;
		margin: 0 auto;
		padding: 40rpx 0rpx;

		.registration-item {
			width: 380rpx;
			height: 380rpx;
			border-radius: 20rpx;
			position: relative;

			.background-image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			.registration-box {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				z-index: 99;
				position: relative;

				.registration-logo {
					width: 150rpx;
					height: 130rpx;
					margin-bottom: 30rpx;

					.item-logo {
						width: 100%;
						height: 100%;

					}
				}

				.registration-title {
					width: 180rpx;
					height: 50rpx;
					font-size: 30rpx;
					color: #666666;
					padding: 0px 16rpx;

					border: 1px solid #c1c6d8;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.rightArrow {
						width: 30rpx;
						height: 30rpx;

						.rightArrow-img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}

					}


				}
			}
		}
	}

	.dashboard {
		width: 100%;
		height: auto;
		margin-bottom: 80rpx;
		background-color: #fff;



		.dashboard-box {
			width: 95%;
			margin: 0 auto;
			padding-top: 30rpx;


			.dashboard-title {
				font-size: 30rpx;
				color: #666666;
			}
		}


	}
</style>